<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../css/login.css">
     <!-- 设置网站的图标 -->
     <link rel="icon" href="../imager/小图标/favicon.ico">
</head>

<body>
    <div class="login-headr">
        <a href=""></a>
    </div>
    <div class="login-left">
        <div class="login-imager">
            <img src="../imager/登录界面/s0.meituan.png" alt="手机">
        </div>
        <div class="login-right">
            <form action="" method="get">
                <div class="login-input1">
                    <div class="zz"><input type="text" name="ipone" maxlength="11"placeholder="请输入手机号"><span>发送验证码</span>
                    </div>
                    <div><input type="password" name="password" maxlength="6" placeholder="请输入短信验证码">
                        <input type="reset" id="remote"></div>
                </div>
                <div class="login-input2"><input type="button" value="登陆"></div>
            </form>
        </div>
    </div>
    <script>
        window.onload = function () {
            var number =60;
            var span = document.querySelector(".zz span");
            var ipone = document.querySelector(".zz>input");
            var user = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
            ipone.onkeyup = function () {
                if (user.test(ipone.value)) {
                    span.style.color = "red";
                    span.style.cursor = "pointer";
                    number=60;
                    span.onclick =function(){
                        if(number==60){
                             voa();
                        }
                    }
                } else {
                    number=0;
                    span.style.color = "black";
                    span.style.cursor = "";
                }
            }
            function voa() {
                    span.innerHTML = number--;
                    if (number == -1) {
                        span.innerHTML = "请重新验证";
                        number = 60;
                        return;
                    }
                    setTimeout(() => {
                        voa();
                    }, 1000);
                }
                var remote=document.getElementById("remote");
                remote.onclick=function(){
                    number=0;
                }
            }
       

    </script>
</body>

</html>